<template>
  <div class="bigScreenBox">
    <div v-if='dataInfo !== null'>
      <div class="bigScreenInnerTop">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="left">
              <div class="leftContent">
                <div class="hello"> 
                  {{ timeCn }} 
                  <div class="time" style="font-weight: 400;font-size: 28px;color: #333;">欢迎使用OSCE考试监控平台</div>
                  <!-- <div class="time" style="font-weight: 500;font-size: 16px">{{ currentTime }}</div> -->
                </div>
                <!-- <div class="title">欢迎使用OSCE考试监控平台</div> -->
                <div class="time timeNew">
                  <div class="time-inner">
                    <p>考试总时长：<span style="color: #17a594;font-weight: 600;">{{ this.dataInfo.sountdownTime }} 分钟</span></p>
                  </div>
                  <div class="time-inner">
                    <p>开始考试时间：<span style="color: #17a594;font-weight: 600;">{{ dataInfo.stationDetails[0].teachers[0].startTime }}</span></p>
                  </div>
                  <div class="time-inner">
                    <p>
                      考试剩余时间：
                      <span v-if="allStatus === 2" style="color: #17a594;font-weight: 600;font-size: 18px;color: #d60734;">{{ countdownTime }}</span>
                      <span v-else style="font-weight: 400;font-size: 14px;">未开始</span>
                    </p>
                    </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="left mid">
              <div class="leftContent midContent">
                <div class="mid-left-icon"></div>
                <div class="mid-right-icon"></div>
                <div class="title">{{ dataInfo.recordsName }} <span style="font-size: 16px;color: rgba(255,255,255,0.8);font-weight: 400;">{{ dataInfo.ifAnonymous == 1 ? '（匿名考试）' : '（实名考试）' }}</span></div>
                <div class="current-inner">
                  <div class="current"><span class="diff">{{ dataInfo.dateEntity.examStartDate.substring(0,16) }} ~ {{ dataInfo.dateEntity.examEndDate.substring(10,16) }}</span></div>
                  <div class="current currentNew"> <div> 当前:第<span class="diff">{{ dataInfo.round }}</span>轮(共<span class="diff">{{ dataInfo.totalRound }}</span>大轮), 共<span class="diff">{{ dataInfo.teamCount }}</span>组,共<span class="diff">{{ dataInfo.stationCount }}</span>考站,共<span class="diff">{{ dataInfo.studentNumber }}</span>名考生</div></div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="bigScreenInnerMid">
        <div class="container">
          <div :class="'itemBox ' + 'itemBox' + i.teamBak" v-for="(i,key) in dataInfo.stationDetails" :key="key">
            <div :class="'innerHeader ' + 'innerHeader' + i.teamBak">
              <div :class="'title ' + 'title' + i.teamBak">{{ i.team }} / {{ i.stationName}}</div>
              <div class="container">
                <div :class="'wave solid warning ' + computedStatusLabel(i.stationStatus)">
                  <div class="circle"></div>
                  <div class="contentWave">
                    <span :class="'icon iconfont icon-' + computedStatusLabel(i.stationStatus)"></span>
                  </div>
                </div>
              </div>
              <div :class="'status ' + computedStatusLabel(i.stationStatus)">{{ computedStatusTitle(i.stationStatus) }}</div>
            </div>
            <div :class="'examInner examInnerBox' + computedStatusLabel(i.stationStatus)">
              <div class="examInnerList">
                <div>当前考生:</div>
                <div class="name">{{ dataInfo.ifAnonymous == 1 ? i.stationStudentNow.anonymousNumber :  i.stationStudentNow.studentName + '(序号：' + i.stationStudentNow.anonymousNumber + ')'}}</div>
              </div>
              <div class="examInnerList">
                <div>考官:</div>
                <div class="name" v-for="(v,index) in i.teachers" :key='index' style="margin-right: 10px">
                  {{ v.teacherName }} 
                  <!--  0: 未就绪（weijiuxu）1：已就绪（yijiuxu） 2：考试中（kaoshizhong）3：结束（jieshu）4：缺考（quekao） -->
                  <span :class=" 'teacherStatus teacher-' +  (v.status == 0 ? 'weijiuxu' : v.status == 1 ? 'yijiuxu' : v.status == 2 ? 'kaoshizhong' : v.status == 3 ? 'jieshu' : v.status == 4 ? 'quekao' : 'zanwu')">{{ v.status == 0 ? '未就绪' : v.status == 1 ? '已就绪' : v.status == 2 ? '考试中' : v.status == 3 ? '结束' : v.status == 4 ? '缺考' : '暂无'}} </span>
                </div>
              </div>
              <div class="examInnerList">
                <div>下一位考生:</div>
                <div class="name" v-if="i.stationStudentNext">{{ dataInfo.ifAnonymous == 1 ? i.stationStudentNext.anonymousNumber :  i.stationStudentNext.studentName }}</div>
                <div class="name" v-else>暂无</div>
              </div>
            </div>
          </div>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
      </div>
      </div>
      <!-- <div class="bigScreenInnerBot">
        <div :class="'breathe-btn breathe-btn-status' + allStatus" @click="submitHandle">
          {{ allStatus === 0 ?  '准备中，请稍后' : allStatus === 1 ?  '开始考试' : allStatus === 2 ?  '考试中' : '考试完成'}}
        </div>
      </div> -->
    </div>
    <div v-if="boxLoading == false && dataInfo === null" class="bigScreenBox2">
      <div class="innerBox">
        <div class="title">暂无考试</div> 
      </div>
    </div>
  </div>
</template>
<script>
import { fetchList, submitStart } from '@/api/bigScreen.js'
// import {fetchList} from '@/api/exam.js'
export default {
  data () {
    return {
      countdownTime: '',
      dataInfo: '',
      //  0: 未就绪（weijiuxu）1：已就绪（yijiuxu） 2：考试中（kaoshizhong）3：结束（jieshu）4：缺考（quekao）
      status: 3,
      statusOptions: [
        {
          label: 'weijiuxu',
          value: 0,
          title: '未就绪'
        },
        {
          label: 'yijiuxu',
          value: 1,
          title: '已就绪'
        },
        {
          label: 'kaoshizhong',
          value: 2,
          title: '考试中'
        },
        {
          label: 'jieshu',
          value: 3,
          title: '已结束'
        },
        {
          label: 'quekao',
          value: 4,
          title: '缺考'
        }
      ],
      timer: null,
      currentTime: '',
      loadingCount: 0,
      boxLoading: true
    }
  },
  created () {
    this.timer = setInterval(() => {
      this.updateTime()
      this.getList()
      this.countdownTimeUpdate()
      this.boxLoading = true
    }, 1000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  computed: {
    allStatus () {
      // console.log('this.dataInfo.stationDetails', this.dataInfo.stationDetails)
      if (this.dataInfo && this.dataInfo.stationDetails) {
        // let status0 = this.dataInfo.stationDetails.filter(val => {
        //   return Number(val.stationStatus) === 0
        // })
        let status1 = this.dataInfo.stationDetails.filter(val => {
          return Number(val.stationStatus) === 1
        })
        let status2 = this.dataInfo.stationDetails.filter(val => {
          return Number(val.stationStatus) === 2
        })
        let status3 = this.dataInfo.stationDetails.filter(val => {
          return Number(val.stationStatus) === 3 || Number(val.stationStatus) === 4
        })
        if (status1.length > 0) {
          // 说明有准备的 则需要进行开始考试操作
          let zhunbeizhong = this.dataInfo.stationDetails.filter(val => {
            return Number(val.stationStatus) === 1 || Number(val.stationStatus) === 4
          })
          if (zhunbeizhong.length === this.dataInfo.stationDetails.length) {
            // 1 可以进行考试
            return 1
          } else {
            // 0 需要等待
            return 0
          }
        } else if (status2.length > 0) {
          // 有正在考试的学生
          return 2
        } else if (status3.length === this.dataInfo.stationDetails.length) {
          // 可以结束考试
          return 3
        } else {
          return 0
        }
      }
    }
  },
  methods: {
    countdownTimeUpdate () {
      const now = new Date().getTime()
      const startTime = new Date(this.dataInfo.stationDetails[0].teachers[0].startTime).getTime()
      const leftTime = Number(this.dataInfo.sountdownTime) * 60 * 1000 - (now - startTime)
      if (leftTime > 0) {
        let leftMin = Math.floor(leftTime / 1000 / 60)
        let leftMSec = Math.floor(leftTime / 1000 - leftMin * 60)
        leftMin = leftMin < 10 ? ('0' + leftMin) : leftMin
        leftMSec = leftMSec < 10 ? ('0' + leftMSec) : leftMSec
        this.countdownTime = leftMin + ' : ' + leftMSec
      } else {
        this.countdownTime = '考试时间已用尽，请结束考试'
      }
    },
    updateTime () {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const day = now.getDate()
      const hours = now.getHours()
      const minutes = now.getMinutes()
      const seconds = now.getSeconds()
      // 确保时间总是以两位数显示
      const formattedMonth = month < 10 ? '0' + month : month
      const formattedDay = day < 10 ? '0' + day : day
      const formattedHours = hours < 10 ? '0' + hours : hours
      const formattedMinutes = minutes < 10 ? '0' + minutes : minutes
      const formattedSeconds = seconds < 10 ? '0' + seconds : seconds
      // 星期几
      const week = now.getDay()
      const weekBak = week === 1 ? '星期一' : week === 2 ? '星期二' : week === 3 ? '星期三' : week === 4 ? '星期四' : week === 5 ? '星期五' : week === 6 ? '星期六' : week === 0 ? '星期日' : ''

      // 更新页面上的时
      if (hours < 12) {
        this.timeCn = '上午好！'
      } else if (hours < 18) {
        this.timeCn = '下午好！'
      } else {
        this.timeCn = '晚上好！'
      }
      this.currentTime = year + '年' + formattedMonth + '月' + formattedDay + '日' + ' ' + formattedHours + ':' + formattedMinutes + ':' + formattedSeconds + '  (' + weekBak + ')  '
    },
    computedStatusTitle (i) {
      return this.statusOptions.filter(val => {
        return val.value === Number(i)
      })[0].title
    },
    computedStatusLabel (i) {
      return this.statusOptions.filter(val => {
        return val.value === Number(i)
      })[0].label
    },
    // 获取大屏数据
    getList () {
      fetchList().then(res => {
        if (res.data.data !== null) {
          this.dataInfo = res.data.data
          let aaa = JSON.parse(JSON.stringify(this.dataInfo.stationDetails))
          let teamArrBak = []
          aaa.map(q => {
            q.team = q.stationStudentNow.team
            q.teamBak = parseInt(q.stationStudentNow.team.substring(1))
            teamArrBak.push(q.teamBak)
          })
          let teamArr = [...new Set(teamArrBak)]
          let arr = []
          teamArr.map(p => {
            let arrBak = []
            aaa.map(q => {
              if (p === q.teamBak) {
                arrBak.push(q)
              }
            })
            let arrBak2 = arrBak.sort((a, b) => parseInt(a.stationName.substring(1)) - parseInt(b.stationName.substring(1)))
            arr = arr.concat(arrBak2)
          })
          // this.sountdownTime = Number(res.data.data.sountdownTime)
          this.dataInfo.stationDetails = []
          this.dataInfo.stationDetails = JSON.parse(JSON.stringify(arr))
          this.boxLoading = false
        } else {
          this.dataInfo = null
          this.boxLoading = false
        }
      })
    },
    submitHandle () {
      if (this.allStatus === 0) {
        this.$message.warning('有未准备的考生，请稍后')
      } else if (this.allStatus === 1) {
        let ids = []
        this.dataInfo.stationDetails.map(val => {
          if (Number(val.stationStatus) === 1) {
            // console.log(val)
            ids.push({id: val.stationStudentNow.id})
          }
        })
        submitStart(ids).then(res => {
          if (res.data.code === 0) {
            this.$message.success('已开始考试')
            this.getList()
          }
        })
      }
    }
  }
}
</script>

<style lang='scss'>
  body{
    overflow: hidden !important;
  }
  .bigScreenBox{
    height: 100vh;
    background: #fff;
    font-family: system-ui;
    height: 100vh;
    width: 100%;
    padding: 10px;
    min-width: 900px;
    display: flex;
    flex-direction: column;
    .bigScreenInnerTop{
      .left{
        height: 140px;
        width: 100%;
        position: relative;
        background: #E1F5F0;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #0DCD9D;
        // background: url(~@/assets/img/bg1.png);
        // background-size: cover;
        // background-position: right;
        .leftContent{
          position: relative;
          z-index: 1; /* 确保内容显示在背景之上 */
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: left;
          font-size: 18px;
          padding: 10px 20px;
          .hello{
            font-size: 20px;
            font-weight: 600;
            color: #00A5A4;
            font-size: 40px;
            display: flex;
            align-items: center;
            font-family: 'PingFang SC-Heavy';
          }
          .title{
            font-size: 22px;
            font-weight: 500;
            padding: 10px 0 0;
          }
          .time{
            font-size: 14px;
          }
          .time-inner{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 40px;
            background: #0DCD9D20;
            border-radius: 8px;
            padding: 0 10px;
            margin-right: 10px;
            p{
              padding: 0;
              margin: 0;
              height: 24px;
              line-height: 24px;
              font-size: 14px;
              font-weight: 400;
              padding-right: 10px;
            }
          }
          .timeNew{
            height: 80px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
        }
        .midContent{
          background: linear-gradient(to right, #00A5A4, #0DCD9D);
          color: #fff;
          border-radius: 12px;
          height: 138px;
          overflow: hidden;
          position: relative;
          padding: 20px 24px;
          .mid-left-icon{
            position: absolute;
            height: 50px;
            width: 80px;
            background: url('~@/assets/img/icon-left.png');
            background-size: 100% 100%;
            left: 20px;
            top: 20px;
          }
          .mid-right-icon{
            position: absolute;
            height: 50px;
            width: 50px;
            background: url('~@/assets/img/icon-right.png');
            background-size: 100% 100%;
            right: 50px;
            top: 20px;
          }
          .title{
            text-align: center;
            font-weight: 600;
          }
          .container{
            overflow: hidden;
          }
        }
        .rightContent{
          display: flex;
          justify-content: center;
          // align-items: center;
          height: 100%;
        }
      }
      .current-inner{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .current{
        padding: 4px 4px;
        font-size: 16px;
        border-radius: 10px;
        animation: slide-background 5s infinite alternate linear;
        .diff{
          font-weight: 400;
          font-size: 18px;
          padding: 14px 2px 0;
        }
      }
      .currentNew{
        background: rgba(255,255,255,0.6);
        width: 100%;
        margin: 0 24px;
        color: #0E6D6C;
        font-size: 16px;
        border-radius: 8px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 16px;
        margin-bottom: 6px;
      }
      // .left::before {
      //   content: "";
      //   display: block;
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   right: 0;
      //   bottom: 0;
      //   background: url('~@/assets/img/bg1.png')  center center;
      //   background-size: cover;
      //   filter: blur(2px);
      //   opacity: 0.9; /* 设置透明度 */
      // }
      // .mid::before {
      //   background: url('~@/assets/img/bg6.png')  center center;
      // }
      // .right::before {
      //   background: url('~@/assets/img/bg4.png')  center center;
      // }
    }
    .bigScreenInnerMid{
      // flex: 1;
      overflow: auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-right: -10px;
    }
    .bigScreenInnerMid > i {
      width: 100px;
      width: 100px;
    }
    .container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      // height: calc( 100vh - 160px);
    }
    .itemBox {
      width: 300px;
      height: 165px;
      margin: 15px 10px 15px 0;
      border-radius: 8px;
      overflow: hidden;
      .innerHeader{
        height: 50px;
        width: 100%;
        background: red;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px 0 10px;
        position: relative;
        .status{
          position: absolute;
          right: 10px;
          font-weight: 600 ;
        }
        .title{
          font-size: 20px;
          font-weight: 600;
        }
        .iconfont{
          font-size: 30px !important;
        }
      }
      .examInner{
        // flex: 1;
        .examInnerList{
          display: flex;
          padding: 10px 10px;
          justify-content: flex-start;
          font-size: 16px;
          color: #333;
          .name{
            // font-size: 18px;
            font-weight: 500;
            color: #000;
            padding-left: 10px;
          }
        }
      }
    }
    .itemBox1{
      background: #00A5A410;
    }
    .innerHeader1{
      background: #00A5A4 !important;
    }
    .itemBox2{
      background: #0DCD9D20;
    }
    .innerHeader2{
      background: #0DCD9D !important;
    }
    .itemBox3{
      background: #FF8A6550;
    }
    .innerHeader3{
      background: #FF8A6560 !important;
    }
    .itemBox4{
      background: #64B5F650;
    }
    .innerHeader4{
      background: #64B5F660 !important;
    }
    .itemBox5{
      background: #9575CD50;
    }
    .innerHeader5{
      background: #9575CD60 !important;
    }
    .itemBox6{
      background: #CE93D850;
    }
    .innerHeader6{
      background: #CE93D860 !important;
    }
    .itemBox7{
      background: #F48FB150;
    }
    .innerHeader7{
      background: #F48FB160 !important;
    }
    .itemBox8{
      background: #EF9A9A50;
    }
    .innerHeader8{
      background: #EF9A9A60 !important;
    }
    .itemBox9{
      background: #9575CD50;
    }
    .innerHeader9{
      background: #9575CD60 !important;
    }
    .itemBox10{
      background: #9575CD50;
    }
    .innerHeader10{
      background: #9575CD60 !important;
    }
    /* 和列表一样的宽度和margin值 */
    .container > i {
      width: 300px;
      margin-right: 10px;
    }
    .bigScreenInnerBot{
      height: 70px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  // 呼吸效果
  .breathe-btn {
    position: relative;
    height: 50px;
    padding: 0 40px;
    line-height: 50px;
    border: 1px solid #00796B;
    border-radius: 5px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    overflow: hidden;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#07a32e), to(#07d63b));
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 2700ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
  }
  @-webkit-keyframes breathe {
    0% {
      opacity: 1;
      box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }

    100% {
      opacity: 1;
      border: 1px solid #07d63b;
      box-shadow: 0 1px 30px #07d63b;
    }
  }
  .breathe-btn-status0{
    background-image: -webkit-gradient(linear, left top, left bottom, from(#D50000), to(#ed0202));
    -webkit-animation-name: breathe0;
  }
  .breathe-btn-status1{
    background-image: -webkit-gradient(linear, left top, left bottom, from(#17a594), to(#00796B));
    -webkit-animation-name: breathe1;
  }
  .breathe-btn-status2{
    background-image: -webkit-gradient(linear, left top, left bottom, from(#17a594), to(#00796B));
    -webkit-animation-name: breathe1;
  }
  @-webkit-keyframes breathe0 {
    0% {
      opacity: 1;
      box-shadow: 0 1px 2px #D5000010;
    }

    100% {
      opacity: 1;
      border: 1px solid #D50000;
      box-shadow: 0 1px 30px #D50000;
    }
  }
  @-webkit-keyframes breathe1 {
    0% {
      opacity: 1;
      box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }

    100% {
      opacity: 1;
      border: 1px solid #00796B;
      box-shadow: 0 1px 30px #00796B;
    }
  }
  

  // 波纹
  /************以下为具体实现************/

  .wave {
    position: relative;
      width: 80px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-size: 28px;
  }

  .wave .circle {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
  }

  /* 波纹效果 */
  .wave.ripple .circle {
      width: calc(100% - 6px); /* 减去边框的大小 */
      height: calc(100% - 6px);/* 减去边框的大小 */
      border: 3px solid #fff;
  }

  .wave.ripple .circle:first-child {
    animation: circle-opacity 2s infinite;
  }

  .wave.ripple .circle:nth-child(2) {
    animation: circle-opacity 2s infinite;
    animation-delay: .3s;
  }

  .wave.ripple .circle:nth-child(3) {
    animation: circle-opacity 2s infinite;
    animation-delay: .6s;
  }

  .wave.ripple.warning {
      color: orange;
  }

  .wave.ripple.warning .circle {
      border-color: orange;
  }
  .teacherStatus{
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
  }
  /* 波动效果 */
  .wave.solid .circle{
    width: 100%;
    height: 100%;
    background: #fff;
  }

  .wave.solid .circle:first-child {
    animation: circle-opacity 2s infinite;
  }
  .wave.solid.weijiuxu {
    color: #fff;
    // color: #d60734;
  }

  .wave.solid.weijiuxu .circle{
    background: #fff;
    // background: #d60734;
  }
  .weijiuxu{
    color: #fff;
    // color: #d60734;
  }
  .examInnerBoxweijiuxu{
    background: #fff;
    // background: #d6073410;
  }
  .teacher-weijiuxu{
    // background: #fff;
    background: #d60734;
  }

  .wave.solid.yijiuxu {
    color: #fff;
    // color: #00C853;
  }
  .wave.solid.yijiuxu .circle{
    background: #fff;
    // background: #00C853;
  }
  .yijiuxu{
    color: #fff;
    // color: #00C853;
  }
  .teacher-yijiuxu{
    // background: #fff;
    background: #00C853;
  }
  .examInnerBoxyijiuxu{
    // background: #00C85310;
  }
  .wave.solid.kaoshizhong {
    color: #fff;
    // color: #00796B;
  }

  .wave.solid.kaoshizhong .circle{
    background: #fff;
    // background: #00796B;
  }
  .kaoshizhong{
    color: #fff;
    // color: #00796B;
  }
  .teacher-kaoshizhong{
    // background: #fff;
    background: #00796B;
  }
  .examInnerBoxkaoshizhong{
    background: #00796B10;
  }
  .wave.solid.jieshu {
    color: #fff;
    // color: #0f72f5;
  }

  .wave.solid.jieshu .circle{
    background: #fff;
    // background: #0f72f5;
  }
  .jieshu{
    color: #fff;
    // color: #0f72f5;
  }
  .teacher-jieshu{
    // background: #fff;
    background: #0f72f5;
  }
  .examInnerBoxjieshu{
    // background: #0f72f510;
  }
  .wave.solid.quekao {
    color: #fff;
    // color: #D50000;
  }

  .wave.solid.quekao .circle{
    background: #fff;
    // background: #D50000;
  }
  .quekao{
    color: #fff;
    // color: #D50000;
  }
  .teacher-quekao{
    background: #fff;
    // background: #D50000;
  }
  .examInnerBoxquekao{
    background: #D5000010;
  }
  @keyframes circle-opacity{
    from {
        opacity: 1;
        transform: scale(0);
    }
    to {
        opacity: 0;
        transform: scale(1);
    }
  }

  .bigScreenBox2{
    height: 100vh;
    background: #fff;
    font-family: system-ui;
    height: 100vh;
    width: 100%;
    padding: 10px;
    min-width: 900px;
    display: flex;
    flex-direction: column;
    .innerBox{
      border: 1px solid #00796B;
      box-shadow: 0 1px 2px #00796B50;
      background: #00796B10;
      border-radius: 6px;
      width: 600px;
      padding: 60px 20px;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title{
        font-size: 30px;
        padding: 40px 0;
        font-weight: 600;
      }
      .infoBox{
        height: 100px;
        width: 300px;
        padding: 0 20px;
        word-break: break-all;
        border: 1px solid #00796B50;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999;
      }
    }
  }

</style>